<template>
    <view>
        <image
            class="measure_back"
            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/record_back.png"
        ></image>
        <measure-records-calendar @select="updataEvent"></measure-records-calendar>

        <view v-if="recordData.record && (recordData.record.id || recordData.store.id)" class="data_view">
            <view class="data_date_view">
                <label style="color: #333333; font-size: 32rpx; font-weight: 500; line-height: 44rpx">{{
                    recordData.dayText
                }}</label>
                <image
                    @click="isShowShareImg = true"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/record_share.png"
                    style="margin-left: auto; margin-right: 0rpx; height: 48rpx; width: 48rpx"
                ></image>
            </view>
            <view v-if="recordData.record.id" class="tizhicheng_data_view">
                <view class="tizhicheng_title_view">
                    <image
                        style="width: 6rpx; height: 28rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/record_flag.png"
                    ></image>
                    <label style="margin-left: 24rpx; color: #333333; font-size: 28rpx">体脂秤数据</label>
                </view>
                <view class="user_flow_row middle_data_view">
                    <view class="user_flow_column">
                        <view class="user_flow_row">
                            <label
                                style="
                                    margin-top: 4rpx;
                                    color: #234941;
                                    font-size: 72rpx;
                                    font-weight: bold;
                                    line-height: 86rpx;
                                "
                                >{{ recordData.record.weight }}</label
                            >
                            <label
                                style="
                                    font-weight: 500;
                                    font-size: 28rpx;
                                    color: #234941;
                                    margin-left: 10rpx;
                                    margin-top: auto;
                                    margin-bottom: 10rpx;
                                "
                                >kg</label
                            >
                            <label style="margin-top: 11rpx" class="status_text"
                                >&nbsp;{{ recordData.record.fatDegreeName }}</label
                            >
                        </view>
                        <label style="margin-top: 10rpx; color: #234941; font-size: 22rpx; padding-bottom: 30rpx"
                            >距离上次瘦了{{
                                (recordData.record.preWeight - recordData.record.weight).toFixed(2)
                            }}kg</label
                        >
                    </view>
                    <image
                        style="
                            margin-left: 152rpx;
                            width: 248rpx;
                            height: 184rpx;
                            margin-top: auto;
                            margin-bottom: 0rpx;
                        "
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_girl.png"
                    ></image>
                </view>
                <view class="tz_data">
                    <view class="tz_item">
                        <image
                            class="tz_icon"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_bim.png"
                        ></image>
                        <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                            <label class="tz_title">BIM</label>
                            <label class="tz_value">{{ recordData.record.bim }}</label>
                        </view>
                    </view>
                    <view class="tz_item">
                        <image
                            class="tz_icon"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_zf.png"
                        ></image>
                        <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                            <label class="tz_title">体脂率</label>
                            <label class="tz_value">{{ recordData.record.bodyFatRatio }}%</label>
                        </view>
                    </view>
                    <view class="tz_item">
                        <image
                            class="tz_icon"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_jr.png"
                        ></image>
                        <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                            <label class="tz_title">肌肉率</label>
                            <label class="tz_value">{{ recordData.record.muscleRatio }}%</label>
                        </view>
                    </view>
                    <view class="tz_item">
                        <image
                            class="tz_icon"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_zf.png"
                        ></image>
                        <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                            <label class="tz_title">脂肪含量</label>
                            <label class="tz_value">{{ recordData.record.fatContent }}kg</label>
                        </view>
                    </view>
                    <view class="tz_item">
                        <image
                            class="tz_icon"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_jr.png"
                        ></image>
                        <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                            <label class="tz_title">肌肉重量</label>
                            <label class="tz_value">{{ recordData.record.muscleWeight }}kg</label>
                        </view>
                    </view>
                    <view class="tz_item">
                        <image
                            class="tz_icon"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_gl.png"
                        ></image>
                        <view style="margin-left: 10rpx; justify-content: space-between" class="user_flow_column">
                            <label class="tz_title">骨骼肌率</label>
                            <label class="tz_value">{{ recordData.record.skeletalMuscleRatio }}%</label>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="recordData.store.id" class="store_data_view">
                <view class="tizhicheng_title_view">
                    <image
                        style="width: 6rpx; height: 28rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/record_flag.png"
                    ></image>
                    <label style="margin-left: 24rpx; color: #333333; font-size: 28rpx">到店数据</label>
                </view>
                <view class="user_flow_column">
                    <view style="margin-left: 30rpx; width: calc(100% - 60rpx)" class="user_flow_row">
                        <label
                            style="
                                margin-top: 0rpx;
                                color: #234941;
                                font-size: 72rpx;
                                font-weight: bold;
                                line-height: 86rpx;
                            "
                            >{{ recordData.store.weight }}</label
                        >
                        <label
                            style="
                                font-weight: 500;
                                font-size: 28rpx;
                                color: #234941;
                                margin-left: 10rpx;
                                margin-top: auto;
                                margin-bottom: 10rpx;
                            "
                            >kg</label
                        >
                    </view>
                    <label
                        style="
                            margin-left: 30rpx;
                            margin-top: 10rpx;
                            color: #234941;
                            font-size: 22rpx;
                            padding-bottom: 30rpx;
                        "
                        >距离上次瘦了{{ (recordData.store.preWeight - recordData.store.weight).toFixed(2) }}kg</label
                    >
                </view>
            </view>
        </view>
        <view v-else class="no_data_view">
            <image
                style="width: 316rpx; height: 316rpx; margin-top: 120rpx"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
            ></image>
            <label style="color: #272a37; font-size: 32rpx; margin-top: 42rpx">暂无数据</label>
        </view>

        <View
            class="foterName"
            :style="!recordData.store.id && 'margin-top:10px'"
            @click="onPush"
            v-if="weightList > 0"
        >
            <View class="foterCom">
                <View class="dian"></View>
                <View class="fotertxt"> 你有{{ weightList }}条体脂称测量数据待领取 </View>
                <image
                    style="width: 16px; height: 16px"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wigthRIght.png"
                ></image>
            </View>
        </View>
        <share-img-measure
            v-if="isShowShareImg"
            :mainData="userDetail"
            :show="isShowShareImg"
            @close="isShowShareImg = false"
            @saveImage="saveImage"
            :measurementRecordSharePicture="loseWeightSharePicture"
            :recordDate="recordData.dayText"
            @shareMenu="shareMenu"
        ></share-img-measure>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            recordData: {},
            userDetail: {},
            isShowShareImg: false,
            lastWeightRecordDiff: 0,
            loseWeightSharePicture: "",
            weightList: 0,

            // anvasImages:''
        };
    },
    computed: {
        ...mapState(["isLogin", "userInfo", "connectDeviceId"]),
    },
    methods: {
        onPush() {
            uni.navigateTo({
                url: "/packageStaff/pages/weightList/index",
            });
        },
        async weightListNum() {
            // "39E4A935-4025-502A-C89F-0A6D40385C69"
            // if (this.connectDeviceId) {
            const { data } = await this.request.httpTokenRequest(`/mp-api/wx/deviceRecord/count`, "GET");
            if (data > 0) {
                this.weightList = data;
            } else {
                this.weightList = 0;
            }
            // }
        },
        updataEvent(item) {
            item.record.fatDegreeName = item.record.fatDegreeName ? item.record.fatDegreeName : "正常";
            this.recordData = item;
        },
        saveImage(image) {
            let that = this;
            uni.saveImageToPhotosAlbum({
                filePath: image, //图片文件路径
                success: function () {
                    uni.showToast({
                        title: "图片保存成功",
                        icon: "none",
                    });
                    setTimeout(() => {
                        that.isShowSaveImg = false;
                        that.isShowShareImg = false;
                        uni.showTabBar();
                    }, 1000);
                },
                fail: function (e) {
                    uni.openSetting();
                    if (e.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
                        uni.showToast({
                            title: "请授权图片保存到相册",
                            icon: "none",
                        });
                    } else {
                        uni.showToast({
                            title: "图片保存失败",
                            icon: "none",
                        });
                    }
                },
            });
        },
        godailyWeight() {
            this.request
                .httpTokenJsonRequest("/mp-api/wx/home/search/dailyWeight/default", null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loseWeightSharePicture = this.request.baseUrl + res.data.measurementRecordSharePicture;
                    }
                });
        },
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.userDetail = res.data;
                    }
                });
        },
        shareMenu(e) {
            this.anvasImages = e;
        },
    },
    onShow() {
        this.requestUser();
        this.godailyWeight();
        this.weightListNum();
    },
    onShareAppMessage(res) {
        let that = this;
        let imageUrl =
            "https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/profile/upload/2024/06/04/7382ecc5-6004-4051-bb40-a1edf33e9117.jpg";
        if (res.from === "button") {
            imageUrl = that.anvasImages;
        }
        return {
            title: "倾小瘦小程序    减重记录，见证你的每一步成长",
            imageUrl,
            path: "/packageMine/pages/measureRecords/measureRecords",
            success(res) {
                uni.showToast({
                    title: "分享成功",
                    icon: "none",
                });
                that.isShowShareImg = false;
            },
            fail(res) {
                uni.showToast({
                    title: "分享失败",
                    icon: "none",
                });
                that.isShowShareImg = false;
            },
        };
    },
    onShareTimeline(res) {
        let that = this;
        let imageUrl =
            "https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/profile/upload/2024/06/04/7382ecc5-6004-4051-bb40-a1edf33e9117.jpg";

        if (res.from === "button") {
            imageUrl = that.anvasImages;
        }
        return {
            title: "倾小瘦小程序    减重记录，见证你的每一步成长",
            imageUrl,
            path: "/packageMine/pages/measureRecords/measureRecords",
            success(res) {
                uni.showToast({
                    title: "分享成功",
                    icon: "none",
                });
                that.isShowShareImg = false;
            },
            fail(res) {
                uni.showToast({
                    title: "分享失败",
                    icon: "none",
                });
                that.isShowShareImg = false;
            },
        };
    },
};
</script>

<style scoped>
.measure_back {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}

.data_view {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.bindClass {
    margin-top: 15px;
}

.data_date_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 30rpx;
    width: calc(100% - 60rpx);
    align-items: center;
    margin-top: 22rpx;
    height: 88rpx;
}

.tizhicheng_data_view {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 24rpx;
    margin-left: 30rpx;
    width: calc(100% - 60rpx);
    height: 474rpx;
}

.tizhicheng_title_view {
    display: flex;
    flex-direction: row;
    height: 100rpx;
    width: 100%;
    align-items: center;
}

.user_flow_row {
    display: flex;
    flex-direction: row;
}

.middle_data_view {
    margin-left: 30rpx;
    margin-top: -20rpx;
}

.user_flow_column {
    display: flex;
    flex-direction: column;
}

.status_text {
    font-size: 22rpx;
    color: #fff;
    width: 66rpx;
    height: 36rpx;
    line-height: 36rpx;
    background-image: url("@/static/img/homeuserdata/user_data_qipao.png");
    margin-left: 22rpx;
    background-size: cover;
    text-align: center;
    padding-left: 3px;
}

.tz_data {
    background-color: #edf5f2;
    margin-top: 0rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    width: calc(100% - 90rpx);
    border-radius: 16rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-top: 28rpx;
    padding-bottom: 28rpx;
    height: 130rpx;
    align-content: space-between;
}

.tz_item {
    width: calc(33.3% - 20rpx);
    display: flex;
    flex-direction: row;
    height: 48rpx;
    align-items: center;
}

.tz_icon {
    width: 48rpx;
    height: 48rpx;
}

.tz_title {
    color: #999999;
    font-size: 20rpx;
}

.tz_value {
    color: #234941;
    font-size: 26rpx;
    font-weight: bold;
}

.store_data_view {
    margin-top: 20rpx;
    margin-left: 30rpx;
    width: calc(100% - 60rpx);
    height: 240rpx;
    background-image: url("@/static/img/wo/record_logo.png");
    background-size: cover;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.no_data_view {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.foterName {
    /* margin-top: 10px; */
    padding-left: 15px;
    padding-right: 15px;
    /* margin-bottom: 20px; */
    padding-bottom: 20px;
    margin-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
.foterCom {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.dian {
    width: 8px;
    height: 8px;
    background: #fb444a;
    border-radius: 50%;
    margin-right: 5px;
}
.fotertxt {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #234941;
}
</style>
